<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0, viewport-fit=cover">
	<title>Document</title>
	<style>
		html, body, .main {
			width: 100%;
			height: 100%;
		}
        i {
            width: 30px;
            height: 30px;
            position: fixed;
            box-sizing: border-box;
            z-index: 9999;
            border-radius: 100px;
            transform: translate3d(0, 0, 0) scale(3);
            transition: transform 1s 0s ease-out;

        }
	</style>

</head>
<body>
	<div class="main"  onclick="playColor(event)">
		<h1>点击特效</h1>
	</div>
	<script src="./color-ball-class.js"></script>
 </body>
<script>

function playColor(e){
	console.log(e)
	var colorBall = new ColorBall()
	colorBall.fly(e.clientX, e.clientY)
}

</script>
</body>
</html>



<!-- 
ontouchstart
function toucuPlayColor(e) {
	var colorBall = new ColorBall()
	colorBall.fly(e.changedTouches[0].clientX,e.changedTouches[0].clientY);
	e.stopPropagation()
	e.preventDefault()
}
/*
// var colorBall = new ColorBall()
// colorBall.fly(document.body.clientWidth/2, document.body.clientHeight/2, 10, 300)



默认的配置
var params = {
        colors: ["#eb125f", "#6eff8a", "#6386ff", "#f9f383"], // 自定义颜色
        size: 30, // 小球大小
	    maxCount: 50, // 点击一次出现多少个球
}


//params不传，则走默认配置
var color = new colorBall(params)
// 绽放一次
color.fly(x, y)
// 绽放5次,间隔300ms
color.fly(x, y, 5, 300)

// blog暴露到了密码
https://github.com/caohanzong/Myblog-snicker
-->
